<template>
  <div>
    <h3>嘿嘿嘿:列表页面</h3>
    <table cellpadding="10" cellspacing="0" border="1">
      <thead>
        <tr>品牌</tr>
        <tr>价格</tr>
        <tr>操作</tr>
      </thead>
      <tbody>
        <tr :key="item.id" v-for="item in data">
          <td>{{ item.name }}</td>
          <td>{{ item.price }}</td>
          <td><button @click="toDetail(item)">详情</button></td>
        </tr>
      </tbody>
    </table>
    <hr>
    <router-link to="/commodity/menu">Menu</router-link>
    <router-link to="/commodity/address">Address</router-link>
    <hr>
    <router-view></router-view>
  </div>
</template>

<script setup lang="ts">
import { data } from '../assets/commodity.json'
import { useRouter } from 'vue-router'

interface Item {
  name: string,
  price: number,
  id: number
}

const router = useRouter()

const toDetail = (item:Item) => {
  router.push({
    path: '/commodity-detail',
    query: { ...item }
  })
}
</script>

<style scoped>

</style>
